﻿<ResourceDictionary xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
                    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:cb="clr-namespace:Core.Infrastructure.Controls;assembly=Core.Infrastructure"
                    xmlns:my="clr-namespace:Core.ScreenStore.View;assembly=Core.ScreenStore"
                    xmlns:cal="clr-namespace:Microsoft.Practices.Composite.Presentation.Regions;assembly=Microsoft.Practices.Composite.Presentation"
                    xmlns:CommandExtensions="clr-namespace:Core.Infrastructure.CommandExtensions;assembly=Core.Infrastructure"
                    xmlns:core="clr-namespace:Core;assembly=Core"
                    xmlns:System="clr-namespace:System;assembly=mscorlib">

    <!-- Core styles start-->
    <Color x:Key="main-bg-color">#ff000000</Color>
    <Color x:Key="menu-bg-color">#ff000000</Color>
    <Color x:Key="title-color">#ffffffff</Color>
    <Color x:Key="menu-item-color">#ff080000</Color>

    <Color x:Key="metro-highlight-color">#22FFFFFF</Color>

    <SolidColorBrush  Color="{StaticResource main-bg-color}"
                      x:Key="main-background" />
    <SolidColorBrush x:Key="menu-background"
                     Color="{StaticResource menu-bg-color}" />

    <Style x:Key="menu-item"
           TargetType="TextBlock">
        <Setter Property="Foreground">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1"
                                     StartPoint="0.5,0">
                    <GradientStop Color="{StaticResource menu-item-color}"
                                  Offset="0.1" />
                    <GradientStop Color="{StaticResource menu-item-color}"
                                  Offset="1" />
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="FontSize"
                Value="20" />
        <Setter Property="FontFamily"
                Value="Segoe UI Light" />
        <Setter Property="VerticalAlignment"
                Value="Center" />
        <Setter Property="TextOptions.TextHintingMode"
                Value="Animated" />
    </Style>


    <Style x:Key="main-title-style"
           TargetType="TextBlock">
        <Setter Property="Foreground">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1"
                                     StartPoint="0.5,0">
                    <GradientStop Color="{StaticResource title-color}"
                                  Offset="0.1" />
                    <GradientStop Color="{StaticResource title-color}"
                                  Offset="1" />
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="FontSize"
                Value="30" />
        <Setter Property="FontFamily"
                Value="Segoe UI Light" />
        <Setter Property="VerticalAlignment"
                Value="Center" />
        <Setter Property="TextOptions.TextHintingMode"
                Value="Animated" />
    </Style>

    <SolidColorBrush x:Key="NavigationBackgroundColorBrush"
                     Color="#FF484848" />
    <SolidColorBrush x:Key="NavigationForegroundColorBrush"
                     Color="#FFFFFFFF" />
    <SolidColorBrush x:Key="HighLightColorBrush"
                     Color="#FF0097FC" />
    <SolidColorBrush x:Key="HoverHyperlinkForegroundColorBrush"
                     Color="Black" />
    <SolidColorBrush x:Key="HoverHyperLinkBackgroundColorBrush"
                     Color="White" />
    <SolidColorBrush x:Key="BodyTextColorBrush"
                     Color="#FF313131" />
    <SolidColorBrush x:Key="AliceBlueColorBrush"
                     Color="AliceBlue" />
    <Color x:Key="Gray1">#FFCCCCCC</Color>
    <Color x:Key="HighlightDarkColor">#FF119EDA</Color>
    <Color x:Key="HighlightLightColor">#FFB2E0F4</Color>

    <Color x:Key="Gray2">#FF7F7F7F</Color>
    <Color x:Key="Gray3">#FF333333</Color>

    <Color x:Key="Gray4">#FFB9B9B9</Color>

    <Color x:Key="Gray5">#FFD8D8D9</Color>

    <Color x:Key="Gray6">#FF9D9D9D</Color>

    <Color x:Key="Gray7">#FFF7F7F7</Color>
    <Color x:Key="Gray8">#FFE0E0E0</Color>

    <Color x:Key="Gray9">#FFA59F93</Color>
    <SolidColorBrush x:Key="TextBoxBorderBrush"
                     Color="{StaticResource Gray1}" />


    <SolidColorBrush x:Key="Gray7Brush"
                     Color="{StaticResource Gray7}" />

    <Style TargetType="ListBox"
           x:Key="ListboxWithoutFrame">
        <Style.Setters>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBox">
                        <Grid>
                            <ItemsPresenter />
                        </Grid>

                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style.Setters>
    </Style>

    <Style TargetType="ListBoxItem"
           x:Key="ListBoxItemWithoutSelection">
        <Style.Setters>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Grid Height="{TemplateBinding Height}"
                              Width="{TemplateBinding Width}">
                            <ContentPresenter HorizontalAlignment="Left"
                                              Margin="{TemplateBinding Padding}"
                                              x:Name="contentPresenter"
                                              Content="{TemplateBinding Content}">
                                <!--ContentTemplate="{TemplateBinding ContentTemplate}"-->
                            </ContentPresenter>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style.Setters>
    </Style>

    <Style x:Key="button-style"
           TargetType="Button">
        <Setter Property="MinHeight"
                Value="25" />
        <Setter Property="FontFamily"
                Value="Segoe UI Light" />
        <Setter Property="FontWeight"
                Value="SemiBold" />
        <Setter Property="Background"
                Value="{StaticResource Gray7Brush}" />
        <Setter Property="BorderBrush"
                Value="Black" />
        <Setter Property="Foreground"
                Value="Black" />
        <Setter Property="Padding"
                Value="5,6" />
        <Setter Property="BorderThickness"
                Value="1" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                                                       Storyboard.TargetName="MouseOverBorder">
                                            <EasingDoubleKeyFrame KeyTime="0"
                                                                  Value="1" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                                                       Storyboard.TargetName="PressedBorder">
                                            <EasingDoubleKeyFrame KeyTime="0"
                                                                  Value="1" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity"
                                                                       Storyboard.TargetName="DisabledVisualElement">
                                            <SplineDoubleKeyFrame KeyTime="0"
                                                                  Value="0.7" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                                                       Storyboard.TargetName="contentPresenter">
                                            <EasingDoubleKeyFrame KeyTime="0"
                                                                  Value="0.3" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused" />
                                <VisualState x:Name="Unfocused" />
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="ValidationStates">
                                <VisualState x:Name="Valid" />
                                <VisualState x:Name="InvalidFocused" />
                                <VisualState x:Name="InvalidUnfocused" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="Background"
                                BorderBrush="Black"
                                BorderThickness="2"
                                Background="White" />
                        <Rectangle x:Name="DisabledVisualElement"
                                   IsHitTestVisible="false"
                                   Opacity="0">
                            <Rectangle.Fill>
                                <SolidColorBrush Color="#A5FFFFFF" />
                            </Rectangle.Fill>
                        </Rectangle>
                        <Border x:Name="MouseOverBorder"
                                Opacity="0">
                            <Border.Background>
                                <SolidColorBrush Color="{StaticResource Gray8}" />
                            </Border.Background>
                        </Border>
                        <Border x:Name="PressedBorder"
                                Background="Black"
                                Opacity="0"
                                BorderBrush="Black" />
                        <ContentPresenter x:Name="contentPresenter"
                                          ContentTemplate="{TemplateBinding ContentTemplate}"
                                          Content="{TemplateBinding Content}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          Margin="{TemplateBinding Padding}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          OpacityMask="{x:Null}" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="HyperlinkButton"
           x:Key="linkArticleStyle">
        <Setter Property="FontSize"
                Value="14" />
        <Setter Property="HorizontalAlignment"
                Value="Left" />
        <Setter Property="Margin"
                Value="20" />
        <Setter Property="MaxWidth"
                Value="800" />
    </Style>

    <Style TargetType="TextBlock"
           x:Key="textArticleStyle">
        <Setter Property="FontSize"
                Value="14" />
        <Setter Property="HorizontalAlignment"
                Value="Left" />
        <Setter Property="Foreground"
                Value="White" />
        <Setter Property="TextWrapping"
                Value="Wrap" />
        <Setter Property="Margin"
                Value="20" />
        <Setter Property="MaxWidth"
                Value="800" />
    </Style>

        <Style x:Key="text-button-style"
           TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
                                                        Storyboard.TargetName="buttonTextBlock"
                                                        Duration="0:0:0.1"
                                                        To="DarkGray">

                                        </ColorAnimation>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
                                                        Storyboard.TargetName="buttonTextBlock"
                                                        Duration="0:0:0.1"
                                                        To="White">

                                        </ColorAnimation>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity"
                                                                       Storyboard.TargetName="buttonTextBlock">
                                            <SplineDoubleKeyFrame KeyTime="0"
                                                                  Value="0.7" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                                                       Storyboard.TargetName="buttonTextBlock">
                                            <EasingDoubleKeyFrame KeyTime="0"
                                                                  Value="0.3" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>

                        </VisualStateManager.VisualStateGroups>
                        <TextBlock x:Name="buttonTextBlock"
                                   Style="{StaticResource main-title-style}"
                                   Foreground="Gray"
                                   Text="{TemplateBinding Content}" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="TextBlock"
           x:Key="SmallMetroFont">
        <Setter Property="FontSize"
                Value="12" />
        <Setter Property="Foreground"
                Value="White" />
        <Setter Property="FontFamily"
                Value="Segoe UI" />
    </Style>

    <Style x:Key="metro-item-button-style"
           TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                                                       Storyboard.TargetName="MouseOverBorder">
                                            <EasingDoubleKeyFrame KeyTime="0"
                                                                  Value="1" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <ColorAnimation Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
                                                        Storyboard.TargetName="BottomLabel"
                                                        Duration="0:0:0.1"
                                                        To="White">

                                        </ColorAnimation>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                                                       Storyboard.TargetName="PressedBorder">
                                            <EasingDoubleKeyFrame KeyTime="0"
                                                                  Value="1" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity"
                                                                       Storyboard.TargetName="DisabledVisualElement">
                                            <SplineDoubleKeyFrame KeyTime="0"
                                                                  Value="0.7" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                                                       Storyboard.TargetName="contentPresenter">
                                            <EasingDoubleKeyFrame KeyTime="0"
                                                                  Value="0.3" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused" />
                                <VisualState x:Name="Unfocused" />
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="ValidationStates">
                                <VisualState x:Name="Valid" />
                                <VisualState x:Name="InvalidFocused" />
                                <VisualState x:Name="InvalidUnfocused" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="Background"
                                BorderBrush="Black"
                                BorderThickness="2"
                                Background="Transparent" />
                        <Rectangle x:Name="DisabledVisualElement"
                                   IsHitTestVisible="false"
                                   Opacity="0">
                            <Rectangle.Fill>
                                <SolidColorBrush Color="#A5FFFFFF" />
                            </Rectangle.Fill>
                        </Rectangle>
                        <Border x:Name="MouseOverBorder"
                                VerticalAlignment="Top"
                                Height="86"
                                Width="86"
                                Margin="0"
                                Opacity="0">
                            <Border.Effect>
                                <BlurEffect Radius="4" />
                            </Border.Effect>
                            <Border.Background>
                                <SolidColorBrush Color="{StaticResource metro-highlight-color}" />
                            </Border.Background>
                        </Border>
                        <Border x:Name="PressedBorder"
                                VerticalAlignment="Top"
                                Height="86"
                                Width="86"
                                Margin="0"
                                Background="Black"
                                Opacity="0"
                                BorderBrush="Black" />

                        <StackPanel Height="120"
                                    Width="80">
                            <Grid Margin="0,2,0,0">
                                <Border BorderThickness="1"
                                        Height="80"
                                        Width="80"
                                        BorderBrush="Gray" />
                                <Image Source="{Binding MainImageUri}"
                                       Height="80"
                                       Width="80"
                                       Stretch="Fill" />
                            </Grid>
                            <StackPanel Margin="0,4,0,0">
                                <TextBlock Style="{StaticResource SmallMetroFont}"
                                           Text="{Binding Title}"
                                           TextWrapping="NoWrap"
                                           Width="80" />
                                <TextBlock Style="{StaticResource SmallMetroFont}"
                                           Text="{Binding PublishDate}"
                                           x:Name="BottomLabel"
                                           Foreground="Gray"
                                           TextWrapping="NoWrap"
                                           Width="80" />
                                <StackPanel.OpacityMask>
                                    <LinearGradientBrush StartPoint="0,0.5"
                                                         EndPoint="1,0.5">
                                        <GradientStop Color="White"
                                                      Offset="0.7" />
                                        <GradientStop Color="Transparent"
                                                      Offset="1" />
                                    </LinearGradientBrush>
                                </StackPanel.OpacityMask>
                            </StackPanel>
                        </StackPanel>

                        <ContentPresenter x:Name="contentPresenter"
                                          ContentTemplate="{TemplateBinding ContentTemplate}"
                                          Content="{TemplateBinding Content}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          Margin="{TemplateBinding Padding}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          OpacityMask="{x:Null}" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="cb:ContentControlWithVisualStates"
           x:Key="MainRegionStyle">

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="cb:ContentControlWithVisualStates">
                    <Grid x:Name="ContentPresenter">
                        <Grid.Resources>
                            <Storyboard x:Name="EnterAnimation">
                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                                               Storyboard.TargetProperty="(UIElement.Opacity)"
                                                               Storyboard.TargetName="ContentPresenter">
                                    <SplineDoubleKeyFrame KeyTime="00:00:00"
                                                          Value="0" />
                                    <SplineDoubleKeyFrame KeyTime="00:00:00.400"
                                                          Value="1" />
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                                               Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"
                                                               Storyboard.TargetName="ContentPresenter">
                                    <SplineDoubleKeyFrame KeyTime="00:00:00"
                                                          Value="-30" />
                                    <EasingDoubleKeyFrame KeyTime="00:00:00.700"
                                                          Value="0">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CubicEase EasingMode="EaseOut" />
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </Grid.Resources>

                        <Grid.RenderTransform>
                            <TranslateTransform />
                        </Grid.RenderTransform>

                        <ContentPresenter Content="{TemplateBinding Content}"
                                          ContentTemplate="{TemplateBinding ContentTemplate}"
                                          Cursor="{TemplateBinding Cursor}"
                                          Margin="{TemplateBinding Padding}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />

                    </Grid>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="ShellViewStyle"
           TargetType="core:ShellView">
        <Setter Property="CommandExtensions:ControlLoaded.Command"
                Value="{Binding Loaded}" />
        <Setter Property="CommandExtensions:ControlUnloaded.Command"
                Value="{Binding Unloaded}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="core:ShellView">
                    <Grid x:Name="LayoutRoot"
                          HorizontalAlignment="Stretch"
                          Background="{StaticResource main-background}"
                          VerticalAlignment="Stretch">

                        <Grid.RowDefinitions>
                            <RowDefinition Height="90" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>

                        <StackPanel HorizontalAlignment="Stretch"
                                    Orientation="Horizontal"
                                    Height="Auto"
                                    Grid.Row="0"
                                    Grid.Column="0"
                                    x:Name="MenuContainer"
                                    Background="{StaticResource menu-background}">

                            <TextBlock Text="myDeck"
                                       Style="{StaticResource main-title-style}"
                                       Margin="20 20 20 20" />
                        </StackPanel>

                        <Grid Grid.Row="1">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="auto" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <StackPanel Orientation="Vertical"
                                        Margin="20">
                                <ItemsControl x:Name="MenuPanel"
                                              Grid.Row="0"
                                              ItemsSource="{Binding Path=MenuData.MenuItems}"
                                              Width="100"
                                              Height="Auto"
                                              HorizontalAlignment="Right">
                                    <ItemsControl.ItemsPanel>
                                        <ItemsPanelTemplate>
                                            <StackPanel Orientation="Vertical" />
                                        </ItemsPanelTemplate>
                                    </ItemsControl.ItemsPanel>
                                    <ItemsControl.ItemTemplate>
                                        <DataTemplate>
                                            <StackPanel Orientation="Horizontal">
                                                <Button Style="{StaticResource button-style}"
                                                        Width="100"
                                                        Height="40"
                                                        Content="{Binding Path=Description}"
                                                        Command="{Binding Mode=OneWay, Path=DataContext.MenuClickCommand, ElementName=LayoutRoot}"
                                                        CommandParameter="{Binding Path=This}" />
                                            </StackPanel>
                                        </DataTemplate>
                                    </ItemsControl.ItemTemplate>
                                </ItemsControl>
                                <Button Command="{Binding ToogleFullScreen}"
                                        Style="{StaticResource button-style}"
                                        Content="set full screen"
                                        Width="100"
                                        Height="40"
                                        HorizontalAlignment="Right" />
                            </StackPanel>

                            <cb:ContentControlWithVisualStates x:Name="MainRegion"
                                                               Grid.Column="1"
                                                               Style="{StaticResource MainRegionStyle}"
                                                               DataContext="{Binding AnimationService}"
                                                               LeaveAnimation="{Binding LeaveViewVisibilityStoryboard, Mode=TwoWay}"
                                                               EnterAnimation="{Binding EnterViewVisibilityStoryboard, Mode=TwoWay}"
                                                               HorizontalAlignment="Stretch"
                                                               HorizontalContentAlignment="Stretch"
                                                               VerticalContentAlignment="Stretch"
                                                               Background="Transparent"
                                                               VerticalAlignment="Stretch">
                                <cb:ContentControlWithVisualStates.RenderTransform>
                                    <TranslateTransform />
                                </cb:ContentControlWithVisualStates.RenderTransform>
                            </cb:ContentControlWithVisualStates>
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="ArticleDetailsViewStyle"
           TargetType="my:ArticleDetailsView">
        <Setter Property="ContentProvider"
                Value="{Binding ContentProvider}" />
        <Setter Property="Article"
                Value="{Binding Article}" />
        <Setter Property="ResourceProvider"
                Value="{Binding ResourceProvider}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="my:ArticleDetailsView">
                    <ScrollViewer BorderThickness="0">
                        <Grid x:Name="LayoutRoot">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="100" />
                            <RowDefinition Height="*" />
                            <RowDefinition Height="100" />
                        </Grid.RowDefinitions>

                        <TextBlock x:Name="Title"
                                   DataContext="{Binding Article}"
                                   Text="{Binding Title}"
                                   Style="{StaticResource main-title-style}"
                                   Grid.Row="0" />
                        <StackPanel  x:Name="Content"
                                     Grid.Row="1"
                                     Height="Auto"
                                     Margin="1" />
                        <StackPanel Grid.Row="2">
                            <TextBlock Text="Tags: "
                                       Style="{StaticResource main-title-style}" />
                            <ListBox x:Name="Tags"
                                     DataContext="{Binding Article}"
                                     ItemsSource="{Binding Tags}"
                                     Style="{StaticResource ListboxWithoutFrame}"
                                     ItemContainerStyle="{StaticResource ListBoxItemWithoutSelection}"
                                     
                                     Width="auto"
                                     Margin="1">
                                <ListBox.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <StackPanel Orientation="Horizontal" />
                                    </ItemsPanelTemplate>
                                </ListBox.ItemsPanel>
                                <ListBox.ItemTemplate>
                                    <DataTemplate>
                                        <Button Style="{StaticResource button-style}"
                                                Height="40"
                                                Width="100"
                                                Command="{Binding ElementName=LayoutRoot, Path=DataContext.SelectTagCommand}"
                                                CommandParameter="{Binding}"
                                                Content="{Binding Name}" />
                                    </DataTemplate>
                                </ListBox.ItemTemplate>
                            </ListBox>
                        </StackPanel>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="MouseOver">
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="OtherStates">
                                <VisualState x:Name="Focused">
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
                    </ScrollViewer> 
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="ArticlesViewStyle"
           TargetType="my:ArticlesView">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="my:ArticlesView">
                    <StackPanel x:Name="LayoutPanel">
                        <StackPanel>
                            <ItemsControl ItemsSource="{Binding Path=Tags}"
                                          Width="Auto"
                                          Height="60"
                                          HorizontalAlignment="Left">
                                <ItemsControl.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <StackPanel Orientation="Horizontal" />
                                    </ItemsPanelTemplate>
                                </ItemsControl.ItemsPanel>
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                        <Button Style="{StaticResource text-button-style}"
                                                Margin="10,0,0,10"
                                                Content="{Binding Path=Name}"
                                                Command="{Binding ElementName=LayoutPanel, Path=DataContext.SelectTagCommand }"
                                                CommandParameter="{Binding}" />
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>
                        </StackPanel>
                        <ListBox ItemsSource="{Binding Articles}"
                                 ScrollViewer.HorizontalScrollBarVisibility="Hidden"
                                 ScrollViewer.VerticalScrollBarVisibility="Visible"
                                 ItemContainerStyle="{StaticResource ListBoxItemWithoutSelection}"
                                 Style="{StaticResource ListboxWithoutFrame}">
                            <ListBox.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <toolkit:WrapPanel />
                                </ItemsPanelTemplate>
                            </ListBox.ItemsPanel>
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <Button Style="{StaticResource metro-item-button-style}"
                                            Margin="10"
                                            Command="{Binding ElementName=LayoutPanel, Path=DataContext.SelectArticleCommand}"
                                            CommandParameter="{Binding}">
                                    </Button>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="ThemeSelectViewStyle"
           TargetType="my:ThemeSelectView">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="my:ThemeSelectView">
                    <StackPanel x:Name="LayoutPanel">
                        <TextBlock Text="Select a theme"
                                   Style="{StaticResource main-title-style}" />
                        <ListBox ItemsSource="{Binding Themes}">
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <Button Style="{StaticResource button-style}"
                                            Command="{Binding ElementName=LayoutPanel, Path=DataContext.SelectThemeCommand}"
                                            CommandParameter="{Binding}"
                                            Content="{Binding Name}" />
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>
